<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<!-- <view class="back iconfont icon-xiangzuo1" @tap="backPage"></view> -->
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">我的</view>
		</view>	
		<view class="bg_box">
			<image class="bg01" :src="getImgSrc('/static/bg02.png')" mode="widthFix"></image>
			<view class="bg_content">
				<view class="name_box">
					<view class="avatar">
						<image :src="avatar || getImgSrc('/static/tx01.png')" mode="scaleToFill"></image>
					</view>
					<view class="name_text">
						<view class="name_go">
							<view class="name">{{phone}}</view>
							<view class="type" v-if="is_agent">
								<view class="i iconfont icon-dailishang"></view>
								<view class="t">代理商</view>
							</view>
						</view>
						<view class="id">ID：{{node}}</view>
						<!-- <view class="realname">
							<view class="real">
								<view class="t">去实名</view>
								<view class="r iconfont icon-xiangyou1"></view>
							</view>
						</view> -->
					</view>
					<!-- <view class="message" :data-url="'/pages/personalcenter/message'" @click="gotopage">
						<view class="icon iconfont icon-xiaoxi"></view>
						<view class="round"></view>
					</view> -->
				</view>
				
				<view class="balance_box">
					<view class="title">我的余额</view>
					<view class="money_box">
						<view class="icon" v-if="seeStatus">￥</view>
						<view class="money" v-if="seeStatus">{{info.user_money}}</view>
						<view class="money" v-if="!seeStatus">*******</view>
						<view class="see iconfont icon-yanjing" v-if="seeStatus" @tap="seeMoney"></view>
						<view class="see iconfont icon-biyan" v-if="!seeStatus" @tap="seeMoney"></view>
					</view>
					<view class="menu_box">
						<view class="menu" :data-url="'/pages/personalcenter/income'" @click="gotopage">
							<view class="i iconfont icon-mingxi"></view>
							<view class="t">收入明细</view>
						</view>
						<view class="menu" :data-url="'/pages/personalcenter/withdraw?money='+info.user_money" @click="gotopage">
							<view class="i iconfont icon-tixian"></view>
							<view class="t">去提现</view>
						</view>
					</view>
				</view>
				
				<view class="list_box">
					<view class="list" :data-url="'/pages/coupon/coupon'" @click="gotopage02">
						<view class="icon">
							<image :src="getImgSrc('/static/menu/menu05.png')" mode="widthFix"></image>
						</view>
						<view class="title" v-if="is_agent">已生成优惠券（{{coupon_num}}）</view>
						<view class="title" v-if="!is_agent">优惠券（{{coupon_num}}）</view>
						<view class="go">去查看</view>
						<view class="arrow iconfont icon-xiangyou1"></view>
					</view>							
				</view>
				
				<view class="apply_box">
					<view class="title_box">
						<view class="title">我的订单</view>
						<view class="arrow" :data-url="'/pages/order/order'" @click="gotopage02">
							<view class="i iconfont icon-lingyongshenqing"></view>
							<view class="t">全部订单</view>
							<view class="a iconfont icon-xiangyou1"></view>
						</view>
					</view>
					<view class="apply_menu">
						<view class="menu" :data-url="'/pages/order/order'" @click="gotopage02">
							<view class="icon iconfont icon-daizhifu"></view>
							<view class="text">待支付</view>
						</view>
						<view class="menu" :data-url="'/pages/order/order'" @click="gotopage02">
							<view class="icon iconfont icon-yixiadan"></view>
							<view class="text">已下单</view>
						</view>
						<view class="menu" :data-url="'/pages/order/order'" @click="gotopage02">
							<view class="icon iconfont icon-yiqianyue"></view>
							<view class="text">已签约</view>
						</view>
						<view class="menu" :data-url="'/pages/order/order'" @click="gotopage02">
							<view class="icon iconfont icon-tuikuan"></view>
							<view class="text">退款</view>
						</view>
				
					</view>
				</view>
				
				<view class="menu_flex">
					<block v-for="(item,index) in menus">
						<view class="menu" :data-url="'/pages/personalcenter/team?avatar='+avatar+'&phone='+phone+'&is_agent='+is_agent" @click="gotopage" v-if="index == 0">
							<view class="icon iconfont" :class="item.icon"></view>
							<view class="text">{{item.text}}</view>
						</view>
						<view class="menu" :data-url="item.url" @click="gotopage" v-if="index != 0">
							<view class="icon iconfont" :class="item.icon"></view>
							<view class="text">{{item.text}}</view>
						</view>
						<!-- <view class="menu" :data-url="item.url" @tap="colseKefu" v-if="index == 5">
							<view class="icon iconfont" :class="item.icon"></view>
							<view class="text">{{item.text}}</view>
						</view> -->
					</block>
				</view>
			</view>
		</view>
		<view class="show_box" v-show="pupu_show" @click="colsePupu($event)">
			<view class="pupu_box" @click.stop.prevent>
				<view class="text">获取手机号快捷登录</view>
				<view class="shuom">
					<view>获取您的手机号用于快捷登录</view>
				</view>
				<view class="loky">
					<view class="xx" @tap="colsePupu">取消</view>
					<view class="xt">
						手机号登录
						<button style="display:block;width:40vw;height: 40px;margin-top:-39px;margin-left: -8px; opacity:0.0;"
							class="wx_box iconfont xt" type="default" open-type="getPhoneNumber"
							@getphonenumber="getPhoneNumber" withCredentials="true"></button>
					</view>
				</view>
			</view>
		
			<PrivacyPop ref="PrivacyPopck"></PrivacyPop>
			<link-us :pupu_show="pshow" :hand_plat_phones="hand_plat_phones" @pu_close="pu_close"></link-us>
		</view>
		
		<!-- <view class="kefu_box" @tap="colseKefu" v-if="kefu_show">
			<view class="kefu_show" @tap.stop="">
				<view class="pupu_coupon">
					<view class="pupu_title">客服微信号：</view>
					<view class="pupu_title">{{wechat}}</view>
					
					<view class="copy" @click="copyText()" style="margin-bottom: 10rpx;">复制客服微信号
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import PrivacyPop from '@/components/PrivacyPop.vue';
	import linkUs from '@/components/link-us.vue';
	export default {
		data() {
			return {
				seeStatus:true,
				page:1,
				scrrol:false,
				info:'',
				pupu_show:false,
				pshow: false,
				jscode:'',
				pid:0,
				coupon_num:0,
				avatar:'',
				money:'',
				phone:'',
				node:'',
				is_agent:0,
				wechat:'',
				kefu_show:false,
				menus:[
					{
						icon:'icon-tuandui',
						text:'分销团队',
						url:'/pages/personalcenter/team',
					},
					{
						icon:'icon-fenxiang',
						text:'分享海报',
						url:'/pages/personalcenter/share',
					},
					{
						icon:'icon-kaipiaolishi',
						text:'开票历史',
						url:'/pages/personalcenter/history',
					},
					{
						icon:'icon-hetong',
						text:'我的合同',
						url:'/pages/personalcenter/contract',
					},
					{
						icon:'icon-sucaizhongxin',
						text:'素材中心',
						url:'/pages/personalcenter/material/material',
					},
					{
						icon:'icon-kefu',
						text:'在线客服',
						url:'/pages/personalcenter/contact',
					},
					{
						icon:'icon-guanyuwomen',
						text:'关于我们',
						url:'/pages/personalcenter/settings/us',
					},
					{
						icon:'icon-shezhi',
						text:'设置',
						url:'/pages/personalcenter/settings/settings',
					},
					
				],
			}
		},
		computed: {
			hand_plat_phones() {
				if (this.vuex?.appInfo?.plat_phone) {
					let str = this.vuex.appInfo.plat_phone.toString();
					let plat_phones = str.split('|');
					return plat_phones;
				}
			},
		},
		onLoad(e) {
			let that = this;
			that.loadData();
			that.get_code();
		},
		onShow(e) {
			let do_login = uni.getStorageSync('do_login');
			let token = uni.getStorageSync('_TOKEN_')
			if(do_login || !token){
				this.pupu_show = true;
				uni.removeStorageSync('do_login');
			}
		},
		methods: {
			seeMoney(){
				let that = this;
				that.seeStatus = !that.seeStatus;
			},
			loadData() {
				let that = this;
				that.Net._get('auth/info', {}, res => {
					if (res.code == 200) {
						that.info = res.data;
						that.coupon_num = res.data.coupon_num;
						that.avatar = res.data.avatar;
						that.money = res.data.user_money;
						that.phone = res.data.x_phone;
						that.node = res.data.node;
						that.is_agent = res.data.is_agent;
						that.wechat = res.data.wechat;
					}
				});
			},
			copyText(){
				uni.setClipboardData({
				    data: this.wechat,
				    success: function () {
				        uni.showToast({
							title: '复制成功',
							icon: 'success',
				            duration: 2000
				        });
				    }
				});
			},
			customerService(){
				let that = this;
				wx.openCustomerServiceChat({
					extInfo: {url: 'https://work.weixin.qq.com/kfid/kfc500fbb46e9f01aae'},
					corpId: 'ww9954cede62d4ff9a',
					success(res) {
						console.log(res)
					}
				})
			},
			pu_show() {
				this.pshow = !this.pshow;
			},
			pu_close() {
				this.pshow = false;
			},
			colsePupu(ev) {
				this.pupu_show = !this.pupu_show;
			},
			colseKefu(f){
				this.kefu_show = !this.kefu_show;
			},
			getPhoneNumber: function(e) {
				this.throttle(this.real_getPhoneNumber(e), 3000);
			},
			real_getPhoneNumber(e) {
				let that = this;
				if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
					that.Msg.Fail('需要授权获取你的手机号');
				} else {
					// 允许授权  
					if (this.jscode == '') {
						that.Msg.Fail('网络有误,请刷新小程序');
						return false;
					}
					let pid = uni.getStorageSync('pid');
					if (pid){
						this.pid = pid;
					}
					let param = {
						appId: 'wx53a1918b99645f5f',
						encryptedData: e.detail.encryptedData, //加密的用户信息 
						iv: e.detail.iv, //加密算法的初始向量   
						jscode: this.jscode,
						pid: this.pid
					}
					that.Net._post('index/get_wx_phone', param, res => {
						let ret = res.data;
						if (res.code == 200) {
							that.pupu_show = false;
							let user = ret.data.data;
							that.Net._setToken(res.data.token);
							uni.setStorageSync('pid', 0);
							that.Msg.Success('登陆成功', res => {
								that.loadData();
								uni.redirectTo({url: 'pages/personalcenter/personalcenter'});
							});
						}else {
							that.Msg.Fail(ret.msg)
						}
					});
				}
			},
			get_code() {
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						this.jscode = loginRes.code;
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
			gotopage02(e) {
				let url = e.currentTarget.dataset.url;
				uni.switchTab({
					url: url
				});
			},
			throttle(fn, delay) {
			  let timer = null;
			  return function() {
				let context = this, args = arguments;
				if (!timer) {
				  timer = setTimeout(() => {
					fn.apply(context, args);
					timer = null;
				  }, delay);
				}
			  };
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onReachBottom() {
		  var that = this;
		  that.page++;
		  // that.Net._get('shop_goods', {per_page:'10',page:that.page,}, res => {
		  //   if (res.code == 200) {
		  //     //console.log(res)
		  //     if (res.data.data == '') {
		  //       uni.showToast({
		  //         title: '已经是最后一页了',
		  //         duration: 2000,
		  //         icon: 'none'
		  //       });
		  //     } else {
		  //       that.info = that.info.concat(res.data.data); //将数据拼接在一起
		  //     }
		  //   } else if (res.code == 0) {
		  //     that.Msg.Success(res.msg, res => {});
		  //   }
		  // });
		},
	}
</script>

<style>
	
	.header{
		background-color: transparent !important;
	}
	
	.header .text{
		background-color: transparent !important;
		color: #333 !important;
	}
	
	.scrrolHeader{
		background-color: #F9E9E3 !important;
	}
	
	.bg_box{
		width: 100%;
		position: relative;
	}
	
	.bg_box .bg01{
		width: 100%;
	}
	
	.bg_box .bg_content{
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}
	
	.name_box{
		width: 100%;
		margin-top: 4%;
		display: flex;
		align-items: center;
	}
	
	.name_box .avatar{
		width: 18vw;
		height: 18vw;
		margin-right: 4%;
		background-color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.name_box .avatar image{
		width: 90%;
		height: 90%;
		border-radius: 50%;
	}
	
	.name_box .name_text{
		flex: 1;
	}
	
	.name_box .name_text .name_go{
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.name_box .name_text .name_go .name{
		font-size: 5vw;
		color: #333;
		font-weight: bold;
	}
	
	.name_box .name_text .name_go .type{
		background-color: #FFFFFF;
		height: 6vw;
		border-radius: 1.5vw;
		border: 1px solid #FF7701;
		display: flex;
		align-items: center;
		margin-left: 2vw;
	}
	
	.name_box .name_text .name_go .type .i{
		height: 100%;
		width: 6vw;
		border-radius: 1.5vw;
		font-size: 3vw;
		color: #fff;
		background-color: #FF7701;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.name_box .name_text .name_go .type .t{
		height: 100%;
		padding: 0 2vw;
		font-size: 3vw;
		color: #FF7701;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.name_box .name_text .id{
		font-size: 3.5vw;
		color: #999999;
		margin-top: 2vw;
	}
	
	.name_box .name_text .realname{
		margin-top: 2vw;
		display: flex;
	}
	
	.name_box .name_text .realname .real{
		height: 7vw;
		padding: 0 2vw 0 3vw;
		border-radius: 7vw;
		background-color: #FC5D20;
		display: flex;
		align-items: center;
		
	}
	
	.name_box .name_text .realname .real .t{
		font-size: 3vw;
		color: #fff;
		margin-right: 0.5vw;
	}
	
	.name_box .name_text .realname .real .r{
		font-size: 2.7vw;
		color: #fff;
	}
	
	.name_box .message{
		position: relative;
		margin-right: 4%;
	}
	
	.name_box .message .icon{
		font-size: 8vw;
		color: #333;
	}
	
	.name_box .message .round{
		height: 3vw;
		width: 3vw;
		box-sizing: border-box;
		border-radius: 50%;
		text-align: center;
		position: absolute;
		right: 0vw;
		top: 0;
		background-color: #FC5D20;
		color: #fff;
	}
	
	.balance_box{
		width: 100%;
		border-radius: 4vw;
		background: linear-gradient(to bottom, #FFA120, #FF7701);
		padding: 5vw 4vw;
		margin-top: 4%;
	}
	
	.balance_box .title{
		font-size: 4vw;
		color: #fff;
		font-weight: bold;
	}
	
	.balance_box .money_box{
		margin-top: 2vw;
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.balance_box .money_box .icon{
		font-size: 5vw;
		color: #fff;
		font-weight: bold;
		margin-right: 0.5vw;
		margin-top: 2vw;
	}
	
	.balance_box .money_box .money{
		font-size: 8vw;
		color: #fff;
		font-weight: bold;
		flex: 1;
	}
	
	.balance_box .money_box .see{
		font-size: 4vw;
		color: #fff;
	}
	
	.balance_box .menu_box{
		width: 100%;
		margin-top: 3vw;
		display: flex;
		align-items: center;
	}
	
	.balance_box .menu_box .menu{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.balance_box .menu_box .menu:nth-child(1){
		border-right: 1px solid #fff;
	}
	
	.balance_box .menu_box .menu .i{
		font-size: 4vw;
		color: #fff;
		margin-right: 1vw;
	}
	
	.balance_box .menu_box .menu .t{
		font-size: 3.8vw;
		color: #fff;
	}
	
	.list_box{
		margin-top: 4%;
		background-color: #fff;
		padding: 0 4%;
		border-radius: 4vw;
	}
	
	.list_box .list{
		width: 100%;
		height: 14vw;
		display: flex;
		align-items: center;
	}
	
	.list_box .list .icon{
		width: 6vw;
		margin-right: 3vw;
	}
	
	.list_box .list .icon image{
		width: 100%;
	}
	
	.list_box .list .title{
		font-size: 4vw;
		color: #333;
		font-weight: bold;
		margin-right: 3vw;
		flex: 1;
	}
	
	.list_box .list .go{
		width: 18vw;
		height: 8vw;
		border-radius: 8vw;
		background-color: #FE8E28;
		font-size: 3.5vw;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.list_box .list .text{
		font-size: 3.5vw;
		color: #7C8191;
		margin-right: 1vw;
	}
	
	.list_box .list .time{
		font-size: 3.5vw;
		color: #FC5D20;
	}
	
	.list_box .list .arrow{
		font-size: 3.5vw;
		color: #333;
		margin-left: 3vw;
		text-align: right;
	}
	
	.apply_box{
		background-color: #FE8E28;
		padding: 1px;
		border-radius: 3vw;
		margin-top: 4%;
	}
	
	.apply_box .title_box{
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 4vw;
		height: 13vw;
	}
	
	.apply_box .title_box .title{
		font-size: 4.2vw;
		color: #fff;
		font-weight: bold;
		flex: 1;
	}
	
	.apply_box .title_box .arrow{
		background-color: #fff;
		height: 8vw;
		padding: 0 2vw 0 3vw;
		border-radius: 2vw;
		display: flex;
		align-items: center;
	}
	
	.apply_box .title_box .arrow .i{
		font-size: 5vw;
		color: #333;
		margin-right: 1vw;
	}
	
	.apply_box .title_box .arrow .t{
		font-size: 3.2vw;
		color: #333;
		margin-right: 1vw;
	}
	
	.apply_box .title_box .arrow .a{
		font-size: 3vw;
		color: #333;
	}
	
	.apply_box .apply_menu{
		width: 100%;
		border-radius: 3vw;
		padding: 4vw 0;
		background-color: #fff;
		display: flex;
		align-items: center;
	}
	
	.apply_box .apply_menu .menu{
		flex: 1;
	}
	
	.apply_box .apply_menu .menu .icon{
		width: 100%;
		font-size: 7vw;
		color: #333;
		text-align: center;
	}
	
	.apply_box .apply_menu .menu .text{
		font-size: 3.2vw;
		color: #2A3141;
		margin-top: 2vw;
		text-align: center;
	}
	
	.menu_flex{
		width: 100%;
		margin-top: 4%;
		background-color: #fff;
		padding: 4vw 4vw 0 4vw;
		border-radius: 4vw;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
	}
	
	.menu_flex::after {
		flex: auto;
		content: '';
	}
	
	.menu_flex .menu{
		width: 25%;
		margin-bottom: 4vw;
	}
	
	.menu_flex .menu .icon{
		font-size: 7vw;
		color: #333;
		text-align: center;
	}
	
	.menu_flex .menu .text{
		font-size: 3.5vw;
		color: #333;
		text-align: center;
		margin-top: 2vw;
	}
	
	/* 弹窗 */
	.show_box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		z-index: 999;
	}
	
	.show_box .pupu_box {
		width: 100%;
		position: absolute;
		background-color: #fff;
		border-radius: 3vw 3vw 0vw 0vw;
		text-align: center;
		bottom: 0vw;
	}
	
	.show_box .pupu_box .text {
		width: 100%;
		text-align: left;
		font-size: 16px;
		font-weight: bold;
		color: #333;
		padding: 5vw 0vw 0vw 5vw;
	}
	
	.show_box .shuom {
		font-size: 4vw;
		color: #666;
		text-align: left;
		line-height: 25px;
		width: 90%;
		margin: 20px auto;
	}
	
	.loky {
		display: flex;
		justify-content: space-between;
		width: 80%;
		margin: auto;
		padding-bottom: 3vw;
	}
	
	.xx {
		color: #07c160;
		background-color: #f2f2f2;
		width: 45%;
		height: 10vw;
		line-height: 10vw;
		font-size: 4vw;
		font-weight: bold;
		border-radius: 2vw;
	}
	
	.xt {
		color: #fff;
		background-color: #07c160;
		width: 45%;
		height: 10vw;
		line-height: 10vw;
		font-size: 4vw;
		font-weight: bold;
		border-radius: 2vw;
	}
	
	.kefu_box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999999999;
		display: flex;
		justify-content: center;
		align-items: center;
	}
		
	.kefu_box .kefu_show {
		width: 76%;
	/* 	background-color: #fff; */
		/* border-radius: 4vw; */
		/* padding: 5vw 4vw; */
		position: relative;
	}
		
	.kefu_box .kefu_show .pupu_title{
		font-size: 4.5vw;
		color: #333;
		text-align: center;
		font-weight: bold;
		padding-bottom: 5vw;
	}
	.kefu_box .kefu_show .copy{
		width: 34%;
		margin-left: 63%;
		border-radius: 15rpx;
		line-height: 7vw;
		height: 7vw;
		text-align: center;
		background: #FF7F22;
		color: #ffffff;
		font-size: 3.5vw;
		padding-bottom: 5vw;
	}
		.kefu_box .kefu_show .close{
			font-size: 4vw;
			color: #333;
			text-align: center;
			position: absolute;
			right: 5vw;
			top: 5vw;
		}
		
		.kefu_box .kefu_show .pupu_coupon{
			height: 30vw;
			background: #fff;
			border-radius: 3vw;
		}
		
		.kefu_box .kefu_show .pupu_coupon image{
			width: 100%;
		}
		
		.kefu_box .kefu_show .pupu_menu{
			width: 100%;
			height: 13vw;
			border-radius: 13vw;
			line-height: 13vw;
			text-align: center;
			background-color: #FF7701;
			color: #fff;
			font-size: 4vw;
			margin: 0 auto;
			margin-top: 4vw;
			font-weight: bold;
		}
</style>
